<template>
	<view style="display: flex;flex-direction: column;">

		<view class="">
			<view class="content_home"
				style="z-index: 99;position: fixed;background-color: white;padding-bottom: 10px;">

				<view class="search" @click="gotoSearch()">
					<u-search placeholder="日照香炉生紫烟" v-model="keyword" bgColor="white" :animation="true" height="80"
						class="searchBox" shape="round"></u-search>
					<view class="rightClassify" @click="gotoCategory()">
						<u-icon name="list-dot" color="#4cd964" size="40"></u-icon>
						<p>分类</p>
					</view>
				</view>


			</view>


			<view class="" :style="{marginTop:searchContentHeight+'px'}">

				<topscroll class=""></topscroll>
			</view>

			<customSwiper></customSwiper>

			<view class="">
				<image style="width: 100%;" src="../../static/homeUi/homeAdvertisement.png" mode="widthFix"></image>
			</view>

		</view>


		<!-- 分类 -->

		<scroll-view scroll-x="true"
			:style="{position:navPosition,marginTop:navPosition==='fixed'?searchContentHeight-10+'px':'0'}"
			style="z-index: 99;padding: 7px 0px;width: 100%;white-space: nowrap;padding-left: 6px;background-color: white;">
			<view @click="changeSortItem(sortItem.id)" v-for="(sortItem,index) in sortList" :key="sortItem.id"
				:class="{'active':sortItem.id === selectSortItem}"
				style="display: inline-block;height: 100%;width: 25%;border-radius: 20px;background-color: #ffe514;margin-left: 7px;">
				<span style="padding: 5px;display: flex;align-items: center;justify-content: center;height: 100%;">
					{{sortItem.name}}
				</span>
			</view>

		</scroll-view>
		<!-- <u-icon style="position: relative;
						right: 30px;background-color: #f8f8f8;padding-left: 20px;
						background: linear-gradient(to right, transparent, white);
						height: 30px;
						" name="plus" color="black" size="40"></u-icon>
 -->
		<!-- 瀑布流-->
		<waterfall ref="waterfall" class="">
		</waterfall>
	</view>
</template>

<script>
	import topscroll from './components/topscroll.vue'
	import customSwiper from './components/customSwiper.vue'
	import waterfall from './components/waterfall.vue'
	import {
		mapMutations
	} from 'vuex';
	export default {
		name: 'home',
		data() {
			return {

				keyword: '',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				parentMessage: '你好啊',
				sortList: [],
				selectSortItem: 1,
				childrenTitle: "本机 HUAWEI 麦芒型号",

				searchContentHeight: 0, //节点高度
				navPosition: '',

			}
		},

		components: {
			waterfall,
			topscroll,
			customSwiper

		},
		mounted() {
			//计算搜索框高度值
			this.calculateHeight()


			this.getsortList()
		},

		methods: {
			setPosition(flag) {
				if (flag) {
					this.navPosition = 'fixed'
				} else {
					this.navPosition = ''
				}
			},
			calculateHeight() {
				uni.createSelectorQuery()
					.in(this)
					.select('.content_home')
					.boundingClientRect((data) => {
						if (data) {
							console.log('节点高度：', data.height);
							this.searchContentHeight = data.height + 10;
						}
					})
					.exec();
			},
			beforeChangeTabs() {
				return true
			},
			gotoCategory() {
				console.log("123");
				uni.navigateTo({
					url: '../category/category'
				})
			},

			...mapMutations('home', [
				'setPage', // 将 `increment` mutation 映射为 `this.increment()`
				'setPages',
				'setKeyword'
			]),


			getshopList() {


				if (this.$store.state.home.pages !== this.$store.state.home.page) {
					this.setPage(
						this.$store.state.home.page += 1
					)

					this.$refs.waterfall.getSkuPageList({
						page: this.$store.state.home.page
					})

					// this.$children[this.$children.length - 1].getSkuPageList({
					// 	page: this.$store.state.home.page
					// })
				}





			},



			//拿到分类数据
			async getsortList() {

				const result = await this.$u.api.getsortList();

				this.sortList = result

			},

			changeSortItem(categoryId) {
				this.setPage(1)
				this.setPages(0)
				this.selectSortItem = categoryId

				//触发子组件事件(waterfall)
				this.$refs.waterfall.getSkuPageList({
					categoryId: categoryId
				})
				// this.$children[this.$children.length - 1].getSkuPageList({
				// 	categoryId: categoryId
				// })
			},

			gotoSearch() {
				uni.navigateTo({
					url: '../../pagesA/search/search',
					animationType: "none",
					animationDuration: 500
				})
			},

		},




	}
</script>

<style lang="scss" scoped>
	.card {
		display: inline-block;
		width: 100%;

		height: 100%;
	}

	.content_home {
		display: flex;
		flex-direction: column;
		background-size: cover;
		// position: absolute;
		width: 100%;

		.topText {
			display: flex;

			font-size: large;
			color: yellow;
			position: relative;
			top: 60px;

			.scroll {
				padding-left: 30px;
			}
		}
	}

	.search {

		display: flex;
		justify-content: space-between;
		align-items: center;


		.searchBox {
			padding-left: 10px;
			width: 82%;
		}

		.rightClassify {

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 10px;
			padding-right: 10px;
			padding: 0, 0, 5, 5;
		}
	}



	.active {

		color: black;
		// transform: scale(1.2);
		/* 按钮放大 */
		font-weight: bold;
		/* 字体加粗 */
	}

	// .ytabs /deep/ scroll-view{
	// 	margin-top: 30px;
	// 	width: 100%;
	// }
</style>